<template>
  <el-table
    ref="listTableRef"
    :row-key="rowKey"
    :data="state.listTableData"
    v-loading="state.listLoading"
    :border="true"
    :show-header="showHeader"
    :max-height="windowHeight - 190 - defaultHeight"
    @row-dblclick="rowDbClickHandler"
    @select="selectionItemHandler"
    @select-all="selectionAllHanlder"
  >
    <!-- <el-table-column width="40" type="selection" :reserve-selection="true" align="center"></el-table-column> -->
    <template v-for="(item, index) in columnConfigs.headers">
      <el-table-column
        :prop="item.columnName"
        :label="item.columnLabel"
        :sortable="item.sortable"
        :column-key="item.columnKey"
        :min-width="item.minWidth"
        :width="item.width"
        :align="item.align"
      >
        <template v-if="item.custom" #default="scope">
          <slot :name="item.columnName" :index="index" :scope="scope" />
        </template>
      </el-table-column>
    </template>
    <el-table-column width="90" label="操作" fixed="right">
      <template #default="scope">
        <el-button
          class="text_warn"
          text
          v-if="scope.row.selected"
          @click="cancelHandler(scope.row)"
          >取消选择</el-button
        >
        <el-button
          class="text_primary"
          text
          v-else
          @click="checkHandler(scope.row)"
          >选择</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
      v-model:current-page="state.pageNumber"
      v-model:page-size="state.pageSize"
      :page-sizes="columnConfigs.pageSizes"
      layout="total, sizes, prev, pager, next"
      :total="total"
      background
      size="small"
      @size-change="sizeChangeHandler"
      @current-change="currentChangeHandler"
    />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, unref, watch, nextTick } from "vue";
import { ElTable } from "element-plus";
import { useApp } from "../../pinia/modules/app";
import { storeToRefs } from "pinia";
const { windowHeight } = storeToRefs(useApp());
const emit = defineEmits([
  "pushCurrentChange",
  "pushSizeChange",
  "pushAdd",
  "pushRemove",
  "pushLoad",
]);

const props = defineProps({
  listData: {
    type: Array,
    default() {
      return [];
    },
  },
  checkItemList: {
    type: Array,
    default() {
      return [];
    },
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  columnConfigs: {
    type: Object,
    default() {
      return {};
    },
  },
  defaultHeight: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  maxPageSize: {
    type: Number,
    default: 20,
  },
  total: {
    type: Number,
    default: 1,
  },
  // 二级列表关键字
  rowKey: {
    type: String,
    default: "id",
  },
  lazyLoad: {
    type: Boolean,
    default: false,
  },
});
// 初始化数据
let state = reactive({
  listTableData: props.listData,
  tableTabs: [],
  listLoading: props.loading,
  pageNumber: props.currentPage,
  pageSize: props.maxPageSize,
});
const listTableRef = ref<InstanceType<typeof ElTable>>();
// 监听数据变化
watch(
  () => props.listData,
  (val) => {
    state.listTableData = val;
  },
  { deep: true }
);
watch(
  () => props.currentPage,
  (val) => {
    console.log(val);
    state.pageNumber = val;
  },
  { deep: true }
);
watch(
  () => props.loading,
  (val) => {
    if (!val) {
      // 默认选中
      nextTick(() => {
        state.listTableData.forEach((item: any) => {
          listTableRef.value?.toggleRowSelection(item, item.selected);
        });
      });
    }
    state.listLoading = val;
  },
  { deep: true }
);
// 全选/反选
const selectionAllHanlder = (items: any) => {
  if (items.length > 0) {
    items.forEach((item: any) => {
      if (!item.selected) {
        item.selected = true;
        emit("pushAdd", item);
      }
    });
  }
  if (items.length === 0) {
    state.listTableData.forEach((item: any) => {
      item.selected = false;
      emit("pushRemove", item);
    });
  }
};
// 单一项选中
const selectionItemHandler = (items: any, item: any) => {
  if (item.selected) {
    item.selected = false;
    emit("pushRemove", item);
  } else {
    item.selected = true;
    emit("pushAdd", item);
  }
};
const cancelHandler = (item: any) => {
  item.selected = false;
  emit("pushRemove", item);
};
const checkHandler = (item: any) => {
  item.selected = true;
  emit("pushAdd", item);
};

const rowDbClickHandler = (item: any) => {
  if (item.selected) {
    item.selected = false;
    emit("pushRemove", item);
  } else {
    item.selected = true;
    emit("pushAdd", item);
  }
  listTableRef.value?.toggleRowSelection(item, item.selected);
};

const sizeChangeHandler = (val: Number) => {
  state.pageNumber = 1;
  emit("pushSizeChange", val);
};
const currentChangeHandler = (val: Number) => {
  emit("pushCurrentChange", val);
};
</script>
